---
order: 2
title: 精灵渲染器
type: 图形
group: 2D
label: Graphics/2D
---

[SpriteRenderer](/apis/core/#SpriteRenderer) 组件用于在 3D/2D 场景中显示图片。

## 属性

在编辑器中，可以很方便地查看并设置精灵渲染器的属性：

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Q_d5Rqmttr4AAAAAAAAAAAAAehuCAQ/original" alt="image-20231007153753006" style={{ zoom: "50%" }} />

| 属性名                                                       | 属性类型                                                  | 描述                                                                                              |
| :----------------------------------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------ |
| [sprite](/apis/core/#SpriteRenderer-sprite)                   | [Sprite](/apis/core/#Sprite)                               | 使用精灵的引用                                                                                    |
| [width](/apis/core/#SpriteRenderer-width)                     | Number                                                    | 精灵渲染器的宽，若开发者未自定义渲染器宽度，则默认为精灵宽度（世界空间单位）                                      |
| [height](/apis/core/#SpriteRenderer-height)                   | Number                                                    | 精灵渲染器的高，若开发者未自定义渲染器高度，则默认为精灵高度（世界空间单位）                                      |
| [color](/apis/core/#SpriteRenderer-color)                     | [Color](/apis/math/#Color)                                 | 精灵颜色                                                                                          |
| [flipX](/apis/core/#SpriteRenderer-flipX)                     | Boolean                                                   | 渲染时是否 X 轴翻转                                                                               |
| [flipY](/apis/core/#SpriteRenderer-flipY)                     | Boolean                                                   | 渲染时是否 Y 轴翻转                                                                               |
| [drawMode](/apis/core/#SpriteRenderer-drawMode)               | [SpriteDrawMode](/apis/core/#SpriteDrawMode)               | 绘制模式，支持普通，九宫和平铺绘制模式                                                            |
| [maskInteraction](/apis/core/#SpriteRenderer-maskInteraction) | [SpriteMaskInteraction](/apis/core/#SpriteMaskInteraction) | 遮罩类型，用于设置精灵是否需要遮罩，以及需要遮罩的情况下，是显示遮罩内还是遮罩外的内容            |
| [maskLayer](/apis/core/#SpriteRenderer-maskLayer)             | [SpriteMaskLayer](/apis/core/#SpriteMaskLayer)             | 精灵所属遮罩层，用于和 SpriteMask 进行匹配，默认为 Everything，表示可以和任何 SpriteMask 发生遮罩 |
| [material](/apis/core/#SpriteRenderer-setMaterial)            | [Material](/apis/core/#Material)                           |精灵渲染器的[材质](/docs/graphics/material/material/)信息 |
| [priority](/apis/core/#SpriteRenderer-priority)               | Number                                                    | 精灵渲染器的渲染优先级，值越小渲染优先级越高，默认为 0 |

<Callout type="info">**渲染优先级**，**包围盒与相机的距离**等信息共同决定了渲染器的渲染顺序，详情可参照[《渲染顺序》](/docs/graphics/renderer/order/)</Callout>

## 使用

在 **[层级面板](/docs/interface/hierarchy)** 依次 **右键** -> **2D Object** -> **Sprite Renderer** 即可快速创建一个包含精灵渲染器的节点。

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ABuGRoF5B4oAAAAAgJAAAAgAehuCAQ/original" alt="avatar" style={{zoom:"50%"}} />

<Callout type="info">遮罩效果需要配合[精灵遮罩](/docs/graphics/2D/spriteMask/)使用</Callout>
